ES6介绍和使用（二）

日志二级目录

摘要：ES6、ES7简介和调试方法

简介：

ES 就是 ECMAScript的简称，ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。
ES6 也叫 ES2015 全称是ECMAScript2015

咱们接着上次未完的ES继续。。。

new Set()

1.1 ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值

1
2
3
4
5
6
let arr = [1,2,2,3,4];
let a = Array.from(new Set(arr));   //使用Array.from()转成数组
let result = [...new Set(arr)];     //使用...扩展运算符

console.log(a);      //[1,2,3,4]
console.log(result); //[1,2,3,4]

1.2 检查数组是否有重复项

1
2
3
let arr = [1,2,3,3,4,5];

console.log(new Set(arr).size !== arr.length); //true

注意：Set.prototype.size是返回Set实例的成员总数

箭头函数 =>

1.1 用=>来表示函数
1.1.1 简单的箭头函数

1
2
3
const sum = (a,b)=>{
	return a + b;
}

如果一个函数体里面，只有唯一的return语句，此时可以去掉return 这个关键字和 { }这个符号。
上述等价于👇

1
const sum = (a,b) => a+b;

如果形参只有一个，此时可以省略（）;

1
2
3
const area = (r) => 3.14*r*r;
//等价于👇
const area = r => 3.14*r*r;

1.2
可以连续写箭头函数，外层函数返回的是一个函数。

1
2
3
4
5
6
7
8
9
const fun = a => b => a+b;
//等价于👇
const fun = function(a){
	return function(b){
		return a+b;
	}
}

fun(3)(4); //调用的时候需要两个括号

1.3 箭头函数与普通的函数一样，也可以使用ES6的剩余参数

1
2
3
const fun = (a,...args) => args;

console.log(fun(0,1,2,3,4,5,6)); //[1,2,3,4,5,6]

当语句不为单行而是多行语句的时候，需要使用{}把语句括起来

1
2
3
4
const fun = (a,...args) =>{
	console.log(a);
	console.log(args);
}

ES6中新的类定义方式 Class

1.1 在ES5中定义类的方式，原来定义一个类，是用是构造函数，用new 类调用。此时这个函数的上下文就是返回的新的的对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function CreateBall(width,height,color){
	 this.width = width;
	 this.height = height;
	 this.color = color;
	 this.update();
};

CreateBall.prototype.update = function(){
	console.log(`我是${this.color}的球，宽度为${this,width}cm,高度为${this.height}cm!`);
}

new CreateBall(10,10,"白色");

console.log((new CreateBall(10,10,"白色")).__proto__ === CreateBall.prototype); //true
console.log(CreateBall.prototype.hasOwnProperty("update")); //true
console.log(new CreateBall(10,10,"白色").hasOwnProperty("update")); //false

原型链

1.2 ES6 Class类新的写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Createall {
	constructor(width,height,color){
		this.width = width;
	 	this.height = height;
	 	this.color = color;
	}
	update(){
		console.log(`我是${this.color}的球，宽度为${this,width}cm,高度为${this.height}cm!`);
	}
}

let newBall = new createBall(10,10,"白色");
newBall.update();

console.log(newBall.__proto__ === CreateBall.prototype); //true
console.log(CreateBall.prototype.hasOwnProperty("update")); //true
console.log(newBall.hasOwnproperty("update")); //false

继承

1.1 传统继承方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function Son(name,sex,age){
	this.name = name;
	this.sex = sex;
	this.age = age;
}

Son.prototype.goPlay = funcyion(){
	console.log("您好，我是" + this.name + "今年" + this.age );
}

function People(name,sex,age,address){
	Son.apply(this,arguments);
	this.address = address;
}

People.prototype = new Son();

People.prototype.sayHello = function(){
	console.log(this.name + "地址是" + this.address);
}

var test = new People("张三","男",12,"北京市朝阳区");
test.goPlay();
test.sayHello();

1.2 在ES6中，使用extends关键字表示继承，在构造函数中可以使用super来调用父类的构造函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
class Son {
	//构造函数
	constructor(name,sex,age){
		this.name = name;
		this.sex = sex;
		this.age = age;
	}
	goPlay(){
		console.log(`您好，我是${this.name},今年${this.age}`);
	}
};

class People extends Son {
	constructor(name,sex,age,address){、
		//super表示父类（超类）的构造函数
		super(name,sex,age);
		this.address = address;
	}
	sayHello(){
		console.log(`${this.name}地址是${this.address}`);
	}
}

let test = new People("张三","男",12,"北京市朝阳区");
test.sayHello();
test.goPlay();

Promise 对象

1.1 Promise对象是异步编程的一种解决方案，用来解决回调黑洞的问题。
所谓回调黑洞就是指当有多个异步的事件要排队进行的时候，此时必须使用回调黑洞

1
2
3
4
5
6
7
8
9
10
11
12
13
doAsync1(function(){
	doAsync2(function(){
		doAsync3(function(){
			doAsync4(function(){
				doAsync5(function(){
					doAsync6(function(){
						.......
					})
				})
			})
		})
	})
})

Promise对象代表一个异步操作，有三种状态：Pending(进行中)、Resolved(已完成)和Rejected(已失败)
Promise对象的状态改变，只有两种可能：从Pending变为Resolved；从Pending变为Rejected。
ES6规定，Promise对象是一个构造函数，用来生成Promise实例

1
2
3
4
5
6
7
8
9
10
const promise = new Promise ((resolve,reject)=>{
	//some code
	if(/*异步操作成功*/){
		//将状态从pending -> resolved (等待 -> 成功)，并将异步操作的数据传递出去
		resolve(data)
	}else{
		//将状态从pending -> rejected (等待 -> 未成功)，并将错误信息传递出去
		reject(error)
	}
});

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由JavaScript引擎提供，不是自己部署
resolve函数的作用，将Promise对象的状态从”等待”变成”成功”(即从Pending变为Resolved)，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
reject函数的作用是，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise实例生成以后，可以用then方法分别制定Resolved状态和Rejected状态的回调函数
语法：then(fn1,fn2);
参数： fn1 是对Resolved状态的回调函数
fn2 是对Rejected状态的回调函数
说明：then返回的是一个新的Promise实例，不是原来的那个了，所以可以采用链式的写法，指定一组按照顺序调用的回调函数，解决异步IO中深层嵌套的麻烦

1
2
3
4
5
promise.then((value)=>{
	//success
},(error)=>{
	//failure
});

then方法可以接受2个回调函数作为参数，第二个函数是可选的。这两个函数都接受Promise对象传出的值作为参数

1
2
3
4
5
6
7
8
9
function timeout(ms){
	return new Promise((resolve,reject)=>{
		setTimeout(resolve,ms,'已完成');
	});
}

timeout(3000).then((value)=>{
	console.log(value);
});

1
2
3
4
5
6
7
8
9
10
let promise = new Promise((resolve,reject)=>{
	console.log("promise");
	resolve();
})

promise.then((value)=>{
	console.log("resolved");
});

consol.log("hello");

上面代码中，Promise新建后立即执行，所以首先输出的是Promise，然后then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以resolved最后输出。

Promise.all()
作用：将多个Promise实例包装成一个新的Promise实例。
语法：
const promise = Promise.all([p1,p2,p3]);
promise.then().catch()

注意：当p1、p2、p3的状态都变成resolved时，promise才会变成resolved，并调用then()的已完成回调，但只要有一个变成rejected状态，promise就会立刻变成rejected状态

等待下次更新ES+ ……

赏

×

有钱的捧个钱场！没钱的捧个人场

扫码支持
扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

本文标题:ES6介绍和使用（二）

文章作者:Charley Liu

发布时间:2021年03月19日 - 21时39分

最后更新:2021年04月08日 - 23时57分

原始链接:https://charley-liu.github.io/2021/03/19/ES6 2/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。

文章目录
  1. 1. new Set()
  2. 2. 箭头函数 =>
  3. 3. ES6中新的类定义方式 Class
  4. 4. 继承
  5. 5. Promise 对象